<template>
	<view class="recordList">
		<nav-bars title="核销记录" fontColor="#333" bgColor="#fff"></nav-bars>
		<!-- <view class="topImg" :style="{background: 'url('+baseImg+'/static/adminShop/selectStore/bg.png'+')',backgroundSize:'100% 100%'}"></view> -->
		<view class="searchBox">
			<text class="iconfont">&#xe68e;</text>
			<input type="text" value="" v-model="input" @confirm="searchList" placeholder="核销订单编号" />
		</view>
		<view class="list">
			<view class="item" v-for="(item,index) in writeOffList" :key="index">
				<view class="top">
					<image :src="item.prize_img" mode=""></image>
					<view class="info">
						<view class="tit omit-1">{{item.prize_name}}</view>
						<view class="price omit-1"><u-parse :html="prizeInfo.remark"></u-parse></view>
						<view class="time">有效期：{{$utils.getFormatDate(item.start_at*1000,'yyyy.MM.dd')}}-{{$utils.getFormatDate(item.end_at*1000,'yyyy.MM.dd')}}</view>
					</view>
				</view>
				<view class="bottom">
					<view class="num">核销码：<text>{{item.code}}</text></view>
					<view class="num">核销时间：<text>{{$utils.getFormatDate(item.verify_at*1000,'yyyy.MM.dd hh:mm')}}</text></view>
					<!-- <view class="detail" @click="toDetail">记录详情<text class="iconfont icon-jinru"></text></view> -->
				</view>
			</view>
		</view>
		<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
	</view>
</template>

<script>
	import service_writeOff from '@/service/writeOff.js'
	export default{
		data(){
			return{
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了~'
				},
				baseImg:this.$static,
				input:'',
				page:1,
				pagesize:10,
				writeOffList:[]
			}
		},
		onLoad() {
			this.getWriteOffList()
		},
		onReachBottom() {
			this.getWriteOffList('onReach')
		},
		methods:{
			// 获取核销记录
			getWriteOffList(type){
				if(type=='onReach'){
					this.page++
				}else{
					this.page = 1
				}
				let sid = this.$store.state.index.sid;
				let userId = this.$store.state.index.userId;
				let params = {
					keyword:this.input,
					page:this.page,
					pagesize:this.pagesize,
					store_id:sid,
					verify_id:userId
				}
				service_writeOff.getWriteOff(params).then(res=>{
					console.log(res,'核销列表')
					if(res.code==1){
						if(type=='onReach'){
							if(!res.data.data.length){
								this.status = 'nomre'
							}else{
								this.status = 'loading'
							}
							this.writeOffList = this.writeOffList.concat(res.data.data)
						}else{
							if(res.data.data.length<10){
								this.status = 'nomore'
							}
							this.writeOffList = res.data.data?res.data.data:[]
						}
					}
				})
			},
			
			// 搜索
			searchList(){
				this.getWriteOffList()
			},
			
			// 进入核销明细
			toDetail(){
				uni.navigateTo({
					url:'/pagesFour/activity/writeList/recordDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
	.recordList{
		position: relative;
		.topImg{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 515rpx;
		}
		.searchBox{
			position: relative;
			z-index: 2;
			width: 686rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background-color: #EFEFEF;
			padding: 0 31rpx;
			margin: 36rpx auto;
			display: flex;
			align-items: center;
			.iconfont{
				font-size: 30rpx;
				color: #979797;
				margin-right: 13rpx;
			}
			input{
				width: 100%;
				font: 500 26rpx/80rpx PingFang SC;
				color: #979797;
			}
		}
		.list{
			padding: 0 32rpx;
			position: relative;
			z-index: 2;
			.item{
				background-color: #fff;
				box-shadow: 0rpx 2rpx 14rpx 0rpx #F5F5F5;
				border-radius: 16rpx;
				padding: 37rpx 24rpx 27rpx 28rpx;
				margin: 24rpx 0;
				.top{
					display: flex;
					border-bottom: 2rpx solid #EFEFEF;
					image{
						width: 84rpx;
						height: 84rpx;
						flex-shrink: 0;
						margin-right: 33rpx;
					}
					.info{
						padding-bottom: 24rpx;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.tit{
							width: 500rpx;
							font: bold 30rpx/30rpx PingFang SC;
							color: #181E1F;
						}
						.price{
							width: 500rpx;
							font: 500 24rpx/24rpx PingFang SC;
							color: #272C2D;
							margin: 15rpx 0 18rpx 0;
						}
						.time{
							font: 500 24rpx/24rpx PingFang SC;
							color: #878A8A;
						}
					}
				}
				.bottom{
					display: flex;
					margin-top: 24rpx;
					justify-content: space-between;
					.num{
						font: 500 24rpx/24rpx PingFang SC;
						color: #878A8A;
						text{
							color: #181E1F;
						}
					}
					.detail{
						font: 500 24rpx/24rpx PingFang SC;
						color: #CB9436;
						.iconfont{
							font-size: 24rpx;
						}
					}
				}
			}
		}
	}
</style>
